<template>
  <debby-form
    ref="debbyForm"
    v-model="dataForm"
    label-width="100px"
    label-position="top"
    :schema="formSchema"
    @onFieldChange="onFieldChange"
  />
</template>
<script type="text/jsx">
import DebbyForm from '@/components/debby-form/index'
export default {
  name: 'FormCard',
  components: { DebbyForm },
  data() {
    return {
      dataForm: {},
      formSchema: {
        type: 'object',
        properties: {
          grade: {
            type: 'string',
            default: '3',
            ui: {
              label: '年级',
              column: 24
            },
            rules: function(formData) {
              return [
                {
                  required: true, message: formData.class, trigger: 'blur'
                }
              ]
            }
          },
          students: {
            type: 'array-card',
            ui: {
              label: '学生信息',
              column: 12
            },
            items: {
              name: {
                type: 'string',
                ui: {
                  label: '姓名'
                },
                rules: function() {
                  const validName = (rule, value, callback) => {
                    if (!isNaN(value)) {
                      callback(new Error('不能为空并且不能输入数字哦'))
                    }
                  }
                  return [
                    {
                      required: true, validator: validName, trigger: 'blur'
                    }
                  ]
                }
              },
              sex: {
                default: ['男'],
                ui: {
                  label: '性别',
                  render(h, context) {
                    const props = context.props || {}
                    const listeners = context.listeners || {}
                    return (
                      <el-checkbox-group value={props.value} vOn:input={value => listeners.input(value)}>
                        <el-checkbox label='男'></el-checkbox>
                        <el-checkbox label='女'></el-checkbox>
                        <el-checkbox label='其他'></el-checkbox>
                      </el-checkbox-group>
                    )
                  }
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // 某个字段的值发生改变
    onFieldChange(idxChain, value, schema) {
      console.log(idxChain, value, schema)
    }
  }
}
</script>
